<template>
  <div>
    <ul v-for="(item, key) in data" :key="key" class="flex flex-col gr-2">
      <li
        v-if="item.type === 'folder'"
        :id="`contextmenu-${item.id}`"
        v-dragEffect
        class="flex align-center"
        :class="active(item)"
        data-drag-effect
        @click="selectItem(item)"
        @dblclick="item.showChildren = !item.showChildren"
        @contextmenu.self="onContextmenu(item)"
        @dragover="dragover"
        @dragenter="dragEnter(item)"
        @drop="drop(item)"
      >
        <div class="flex gc-4 align-center">
          <div
            class="icon-container flex flex-s"
            @click="item.showChildren = !item.showChildren"
          >
            <template v-if="!item.showChildren">
              <img v-if="item.type === 'folder'" :src="arrowRight" width="14" />
            </template>
            <template v-else>
              <img v-if="item.type === 'folder'" :src="arrowDown" width="14" />
            </template>
          </div>
          <div class="flex gc-2 align-center">
            <img v-if="item.showChildren" :src="folder" width="14" />
            <img v-else :src="folderClose" width="14 " />

            <div v-if="!item.editMode">{{ item.title }}</div>
            <div v-else>
              <input
                :id="item.id"
                v-model="item.title"
                v-focus
                type="text"
                placeholder="请输入名称"
                :maxlength="20"
                @blur="onBlur(item)"
                @keydown.enter="item.editMode = false"
              />
            </div>
          </div>
        </div>
      </li>
      <div
        v-if="showChildren(item)"
        class="ml-86 pl-6"
        style="border-left: 1px dashed #eee"
      >
        <Tree :data="item.children"></Tree>
      </div>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import arrowRight from '@/assets/images/arrow-right.png';
  import folder from '@/assets/images/folder.png';
  import folderClose from '@/assets/images/folder-close.png';

  import arrowDown from '@/assets/images/arrow-down.png';
  /*  */
  import { Folder } from '@/types/global';
  import { deleteById } from '@/store/program/utils';
  import { currentFolder, targetKey, activeId } from '@/views/bus';
  import { dragover } from '@/views/main/data/drag';
  import { onContextmenu, drop, dragEnter } from './tree';

  defineProps<{
    data: Folder[] | undefined;
  }>();

  const selectItem = (item: Folder) => {
    currentFolder.value = item;
    targetKey.value = 'folderKey';
    activeId.value = item.id;
  };

  const showChildren = (item: Folder) => {
    return (
      item.children &&
      item.children.length > 0 &&
      item.showChildren &&
      item.type === 'folder'
    );
  };

  const onBlur = (item: Folder) => {
    item.editMode = false;
    if (!item.title) {
      deleteById(item.id);
      currentFolder.value.id = '';
    }
  };

  const active = (item: Folder) => {
    return {
      active: item.id === activeId.value,
      selected: item.id === currentFolder.value.id,
    };
  };
</script>

<script lang="ts">
  export default {
    name: 'Tree',
  };
</script>

<style lang="scss" scoped>
  @import './tree';
</style>
